<template>
  <div class="client-container">
    <div class="top">
      <filter-cmp @filter="handleFilter" @export="exportClick" />
    </div>
    <div class="bottom">
      <el-table :data="list" style="width: 100%" :height="height">
        <el-table-column prop="name" label="客户姓名" width="180" />
        <el-table-column prop="phone" label="手机号" width="180" />
        <el-table-column label="商场">
          <template slot-scope="scope">
            <div>
              <div
                v-for="(item, index) of scope.row.shop"
                :key="index"
                style="white-space: nowrap"
              >{{ item.shop_name }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="品牌">
          <template slot-scope="scope">
            <div>
              <div v-for="(item ,index) of scope.row.shop" :key="index" style="white-space: nowrap">
                <span>{{ item.brands.join('，') }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="rice" label="消费金额">
          <template slot-scope="scope">
            <div>
              <span
                class="col-blue"
                @click="$router.push({path: '/client/order', query: {customers_id: scope.row.id}})"
              >{{ scope.row.rice }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="designer_name" label="设计师" />
        <el-table-column label="操作" fixed="right" align="center">
          <template slot-scope="scope">
            <div>
              <span class="col-blue" style="white-space: nowrap" @click="addBrand(scope)">添加品牌</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="dialog">
      <el-dialog title="添加品牌" :visible.sync="dialogVisible" :before-close="handleClose">
        <el-form ref="addForm" :model="addForm" label-width="80px">
          <el-form-item label="选择门店:">
            <el-radio v-model="radio" label="1">全球家居1号店</el-radio>
            <el-radio v-model="radio" label="2">欧丽洛雅吴中路商场</el-radio>
          </el-form-item>
          <el-form-item label="品牌:">
            <el-input
              v-model="addForm.brand_name"
              type="textarea"
              class="textarea"
              placeholder="请输入品牌名称"
            />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <Pagination
      class="pagination"
      :total="total"
      :cur-page="currentPage"
      @nextPage="handleNextPage"
    />
  </div>
</template>
<script>
import FilterCmp from "@/views/client/filter-cmp";
import { getCustomerList, addBrandItem } from "@/api/http/customer";
import Pagination from "@/common/pagination";
import Resize from "@/common/mixins/resize";
const ERR_OK = 200;
export default {
  components: {
    FilterCmp,
    Pagination
  },
  mixins: [Resize],
  data() {
    return {
      defaultHeight: 280,
      addForm: {
        brand_name: "",
        id: ""
      },
      radio: "1",
      dialogVisible: false,
      list: [],
      total: 0,
      currentPage: 1,
      filterForm: {
        customers_name: "",
        customers_phone: "",
        designer_name: ""
      }
    };
  },
  created() {
    this._getCustomerList({ page: this.currentPage });
  },
  methods: {
    // 导出excel
    exportClick() {
      window.location.href = `http://ddsc.izhixiu.cn/api/back/designer/exportCustomer?customers_name=${this.filterForm.customers_name}&customers_phone=${this.filterForm.customers_phone}&designer_name=${this.filterForm.designer_name}`;
    },
    handleFilter(params) {
      this.currentPage = 1;
      this.filterForm = params;
      this._getCustomerList(params);
    },
    submit() {
      if (this.addForm.brand_name === "") {
        this.$message({
          message: "请输入品牌名称",
          showClose: true,
          type: "warning"
        });
        return;
      }
      this._addBrandItem({
        id: this.addForm.id,
        brand_name: this.addForm.brand_name,
        shop_id: this.radio
      }).then(res => {
        if (res.code === ERR_OK) {
          this.dialogVisible = false;
          this._getCustomerList({});
        }
      });
    },
    handleNextPage(page) {
      this.currentPage = page;
      this._getCustomerList(
        Object.assign(this.filterForm, { page: this.currentPage })
      );
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    addBrand(scope) {
      this.dialogVisible = true;
      this.addForm.id = scope.row.id;
    },
    _getCustomerList({ customers_name, customers_phone, designer_name, page }) {
      getCustomerList({ customers_name, customers_phone, designer_name, page })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res);
            this.list = res.data.data;
            this.total = res.data.total;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    _addBrandItem({ id, brand_name, shop_id }) {
      return addBrandItem({ id, brand_name, shop_id })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res);
            this.$message({
              message: "添加成功",
              type: "success",
              showClose: true
            });
            return Promise.resolve(res);
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/el-button.scss";
@import "@/styles/el-table.scss";
@import "@/styles/color.scss";
@import "@/styles/el-pagination.scss";
.client-container {
  .bottom {
    margin-top: 20px;
  }
}
.textarea /deep/ .el-textarea__inner {
  width: 300px;
  min-height: 100px !important;
}
.dialog /deep/ .el-dialog {
  width: 600px;
}
</style>
